<template>
  <div class="app-container">
    <Form
      v-if="showSearch"
      v-model:formData="searchInfo"
      :formItems="formItems"
    >
      <template #footer>
        <div style="text-align: left">
          <el-button size="small" icon="Search" type="primary" @click="goSearch"
            >搜索</el-button
          >
          <el-button size="small" icon="Refresh" @click="resetSearch"
            >重置</el-button
          >
        </div>
      </template>
    </Form>
    <h3></h3>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5"> </el-col>
      <right-toolbar
        v-model:showSearch="showSearch"
        @queryTable="resetSearch"
      ></right-toolbar>
    </el-row>
    <h3>
      <!-- <el-button
        size="small"
        icon="Plus"
        type="primary"
        @click="add"
        v-hasPermi="['member:czSpec:add']"
        >添加</el-button
      > -->
      <!-- -->
      <el-button
        size="small"
        icon="Edit"
        type="info"
        v-hasPermi="['member:czSpec:merchantChangSysMore']"
        :disabled="!checkList.length"
        @click="changeMore"
        >批量修改</el-button
      >
    </h3>
    <x-table
      :isLoading="isLoading"
      :propList="propList"
      :tableData="info.items"
      isShowExpand
      :isBorder="false"
      isShowCheckBox
      @selection-change="selectionChange"
    >
      <template #expand="{ row }">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="收款方式:" v-if="userStore.is_show_pay">
            <span>{{ row.pay?.payment_name || "默认支付" }}</span>
          </el-form-item>
          <el-form-item label="佣金规则:">
            <span>{{ row.commission_name || "未配置" }}</span>
          </el-form-item>
          <el-form-item label="分佣金额:">
            <span> 一级分佣:{{ row.commission_money1 }} </span>
            <span style="margin-left: 20px">
              二级分佣:{{ row.commission_money2 }}
            </span>
          </el-form-item>
          <el-form-item label="首充佣金规则:">
            <span>{{ row.first_commission_name || "未配置" }}</span>
          </el-form-item>
          <el-form-item label="首充分佣金额:">
            <span> 一级分佣:{{ row.first_commission_money1 }} </span>
            <span style="margin-left: 20px">
              二级分佣:{{ row.first_commission_money2 }}
            </span>
          </el-form-item>
        </el-form>
      </template>
      <template #is_stop="{ row }">
        <el-tag v-if="row.is_stop == 1" type="danger"> 停售 </el-tag>
        <el-tag v-else type="success"> 不停售 </el-tag>
      </template>
      <template #status="{ row }">
        <!-- <template v-if="row.spec">
          <el-tag v-if="row.spec.status == 1" type="success" effect="dark">
            上架
          </el-tag>

          <el-tag v-else type="danger" effect="dark"> 下架 </el-tag>
        </template> -->

        <!-- <template> -->
        <el-tag v-if="row.status == 1" type="success" effect="dark">
          上架
        </el-tag>
        <el-tag v-else type="danger" effect="dark"> 下架 </el-tag>
        <!-- </template> -->
      </template>
      <!-- <template #sort="{ row }">
        <span>{{ row.spec ? row.spec.sort?row.spec.sort:row.sort : row.sort }}</span>
      </template> -->
      <template #recharge_type="{ row }">
        <el-tag type="success" v-if="row.recharge_type == 1"> 话费 </el-tag>
        <el-tag v-else>流量</el-tag>
      </template>
      <template #is_auto="{ row }">
        <el-tag type="success" v-if="row.is_auto == 1"> 自动 </el-tag>
        <el-tag type="info" v-else>手动</el-tag>
      </template>
      <!-- <template #stop_fail="{ row }">
        <el-tag type="success" v-if="row.stop_fail == 1"> 拦截 </el-tag>
        <el-tag type="info" v-else>不拦截</el-tag>
      </template> -->
      <template #is_limit="{ row }">
        <span v-if="row.is_limit == 1"> 限购 </span>
        <span v-else>不限制</span>
      </template>
      <template #is_user="{ row }">
        <span v-if="row.user_id"> 是 </span>
        <span v-else>否</span>
      </template>
      <template #channel_id="{ row }">
        <span v-if="row.channel_id == -1"> 手动 </span>
        <span v-else>{{ row.channel && row.channel.channel_name }}</span>
      </template>
      <template #created_time="{ row }">
        <span> {{ row.created_time }} </span><br />
        <span>{{ row.updated_time }}</span>
      </template>

      <template #op="{ row }">
        <el-button
          type="primary"
          link
          icon="Edit"
          @click="change(row)"
          v-hasPermi="['member:czSpec:change']"
          >编辑</el-button
        >
        <el-button
          type="primary"
          link
          icon="Delete"
          @click="del(row)"
          v-hasPermi="['member:czSpec:del']"
          >删除</el-button
        >
      </template>
    </x-table>
    <pagination
      v-show="info.total > 0"
      :total="info.total"
      v-model:page="searchInfo.pageNum"
      v-model:limit="searchInfo.pageSize"
      @pagination="getInfo"
    />
    <Dialog
      width="30%"
      :title="dialogConfig.title"
      v-model:isShowDialog="isShowDialog"
      @confirm="submit"
    >
      <!-- <div>
        <p>{{ curItem.content }}</p>
      </div> -->
      <Form ref="formRef" v-bind="dialogConfig.formConfig">
        <template #detail>
          <!-- {{ dialogConfig.formConfig.formData.detail }} -->
          <!-- <Editor
            :value="dialogConfig.formConfig.formData.detail"
            @updateValue="getMsg"
          ></Editor> -->
          <Editor
            v-if="isShowDialog"
            :value="richStr"
            @updateValue="getMsg"
          ></Editor>
        </template>
      </Form>
    </Dialog>
    <!-- 批量修改信息 -->
    <el-dialog
      title="批量设置"
      v-model="isMoreChange"
      width="50vw"
      append-to-body
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <!-- checkList -->
      <el-table :data="checkList">
        <!-- <el-table-column label="产品名称" align="center" prop="name" /> -->
        <el-table-column label="产品分类" align="center" prop="cate.name" />
        <el-table-column label="面值" align="center" prop="face_value" />
        <el-table-column label="原价" align="center" prop="market_price" />
        <el-table-column label="采购价" align="center" prop="user_price" />
        <el-table-column label="默认售价" align="center" prop="sale_price" />
        <el-table-column label="上下架" align="center" prop="status">
          <template #default="{ row }">
            <el-tag v-if="row.status == 1" type="success" effect="dark">
              上架
            </el-tag>
            <el-tag v-else type="danger" effect="dark"> 下架 </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否自动" align="center" prop="is_auto">
          <template #default="{ row }">
            <el-tag type="success" v-if="row.is_auto == 1"> 自动 </el-tag>
            <el-tag type="info" v-else>手动</el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="渠道" align="center" prop="channel_id">
          <template #default="{ row }">
            <span v-if="row.channel_id == -1"> 手动 </span>
            <span v-else>{{ row.channel && row.channel.channel_name }}</span>
          </template>
        </el-table-column> -->
        <!-- <el-table-column label="是否拦截" align="center" prop="stop_fail">
          <template #default="{ row }">
            <el-tag type="success" v-if="row.stop_fail == 1"> 拦截 </el-tag>
            <el-tag type="info" v-else>不拦截</el-tag>
          </template>
        </el-table-column> -->
        <el-table-column label="是否停售" align="center" prop="is_stop">
          <template #default="{ row }">
            <el-tag v-if="row.is_stop == 1" type="danger"> 停售 </el-tag>
            <el-tag v-else type="success"> 不停售 </el-tag>
          </template>
        </el-table-column>
        <!-- <el-table-column label="是否压单" align="center" prop="is_cache">
          <template #default="{ row }">
            <el-tag v-if="row.is_cache == 1" type="danger"> 压单 </el-tag>
            <el-tag v-else type="success"> 不压单 </el-tag>
          </template>
        </el-table-column> -->
      </el-table>
      <br />
      <el-form ref="priceForm" :model="moreChangeForm" label-width="120px">
        <el-row>
          <!-- <el-col :span="layout">
            <el-form-item label="定价方式" prop="sale_mode">
              <el-radio-group
                v-model="moreChangeForm.sale_mode"
                @change="saleChange"
              >
                <el-radio-button :label="1" border>默认售价</el-radio-button>
                <el-radio-button :label="2" border>自定义增减</el-radio-button>
                <el-radio-button :label="3" border>自定义价格</el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="layout">
            <el-form-item label="自定义" prop="sale_mode_value">
              <el-input-number
                :disabled="isDisAbleValue"
                v-model="moreChangeForm.sale_mode_value"
                :precision="2"
                :step="1"
                style="width: 250px"
                :min="-100"
                :max="100"
                placeholder="请输入自定义"
              ></el-input-number>
              <span 
                >定价方式选择 <b style="color: #f00">自定义价格（输入示例：93折输入93即可，输入的是折扣）</b>和<b>自定义增减</b>时有效</span
              >
            </el-form-item>
          </el-col> -->
          <el-col :span="layout">
            <el-form-item label="新人价" prop="first_sale_price">
              <el-input-number
                v-model="moreChangeForm.first_sale_price"
                :precision="2"
                :step="1"
                style="width: 250px"
                :min="-100"
                :max="100"
                placeholder="请输入折扣"
              ></el-input-number>
              <span 
                > <b style="color: #f00">（输入示例：93折输入93即可，输入的是折扣）</b></span
              >
            </el-form-item>
          </el-col> 
        </el-row>

        <el-row>
          <!-- <el-col :span="layout">
            <el-form-item label="是否上下架" prop="status">
              <el-radio-group v-model="moreChangeForm.status">
                <el-radio :label="1" border>是</el-radio>
                <el-radio :label="2" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="layout">
            <el-form-item label="佣金结算规则" prop="commission_id">
              <el-select
                v-model="moreChangeForm.commission_id"
                placeholder="请选择"
                filterable
                clearable
              >
                <el-option
                  v-for="item in commissionList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
        </el-row>
        <el-row>
          <!-- <el-col :span="layout">
            <el-form-item label="是否停售" prop="is_stop">
              <el-radio-group v-model="moreChangeForm.is_stop">
                <el-radio :label="1" border>是</el-radio>
                <el-radio :label="0" border>否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="layout" v-if="userStore.is_show_pay">
            <el-form-item label="收款方式" prop="payment_id">
              <el-select
                v-model="moreChangeForm.payment_id"
                placeholder="请选择收款方式"
                filterable
                clearable
              >
                <el-option
                  v-for="channel in paymentList"
                  :key="channel.id"
                  :label="channel.payment_name"
                  :value="channel.id"
                />
              </el-select>
            </el-form-item>
          </el-col> -->
          <!-- <el-col :span="layout">
            <el-form-item label="停售文本" prop="is_stop_text">
              <el-input
                type="primary"
                link
                placeholder="请输入停售文本"
                v-model="moreChangeForm.is_stop_text"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="layout">
            <el-form-item label="支付成功文案" prop="pay_success_text">
              <el-input
                type="textarea"
                placeholder="请输入支付成功文案"
                v-model="moreChangeForm.pay_success_text"
              ></el-input>
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            type="primary"
            :loading="isSubmitMoreLoading"
            @click="submitChangeMore"
            >确 定</el-button
          >
          <el-button @click="isMoreChange = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ElLoading } from "element-plus";
import {
  sendThis,
  propList,
  formItems,
  dialogConfig,
  isNeedCodeChange,
  limitTypeChange,
  isLimitChange,
  saleModeChange,
} from "./config";
import {
  getList,
  add,
  change,
  del,
  detail,
  getSysList,
  changeSysMore,
} from "@/api/member/productSpec";
import { getAllList } from "@/api/member/productCate";
import { getAllList as getCommissionAllList } from "@/api/member/commissionRule";
import { getArea } from "@/api/common";
import { getAllChannel } from "@/api/member/channel";
import { getPayAllList } from "@/api/member/paySet";
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
export default {
  name: "merchantproductSpecindex",
  data() {
    return {
      userStore,
      paymentList: [],
      isSubmitMoreLoading: false,
      checkList: [],
      commissionList: [],
      moreChangeForm: {},
      richStr: "",
      curItem: {},
      dialogConfig,
      showSearch: true,
      isLoading: false,
      isShowDialog: false,
      propList,
      formItems,
      info: {},
      isMoreChange: false,
      isDisAbleValue: true,
      searchInfo: {
        pageNum: 1,
        pageSize: 10,
        created_time: [],
      },
      layout: 12,
    };
  },
  computed: {},
  created() {
    sendThis(this);
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      const screen = window.screen;
      if (screen.width < 500) {
        this.dialogConfig.formConfig.colLayout.span = 24;
        this.layout = 24;
      } else {
        this.dialogConfig.formConfig.colLayout.span = 12;
        this.layout = 12;
      }
      this.getInfo();
      this.getAllCateList();
      this.getArea();
      this.getCommissionAllList();
      this.getPayAllList();
      // this.getAllChannelList();
    },
    async getCommissionAllList() {
      const { data } = await getCommissionAllList();
      console.log("commission", data);
      // 赋值表单
      this.commissionList = data;
      this.dialogConfig.formConfig.formItems.forEach((item) => {
        if (
          item.prop == "commission_id" ||
          item.prop == "first_commission_id"
        ) {
          item.options = data;
        }
      });
    },
    async getPayAllList() {
      const { data } = await getPayAllList();
      // 赋值表单数据
      this.paymentList = [
        {
          payment_name: "默认支付",
          id: -1,
        },
        ...data,
      ];
      this.formItems.forEach((item) => {
        if (item.prop == "payment_id") {
          item.options = [
            {
              payment_name: "默认支付",
              id: -1,
            },
            ...data,
          ];
        }
      });
      this.dialogConfig.formConfig.formItems.forEach((item) => {
        if (item.prop == "payment_id") {
          item.options = [
            // {
            //   payment_name: "默认支付",
            //   id: -1,
            // },
            ...data,
          ];
        }
      });
    },
    async getAllChannelList() {
      const channelList = [
        {
          id: -1,
          channel_name: "手动",
        },
      ];
      const { data } = await getAllChannel();
      channelList.push(...data);
      // 赋值表单
      this.dialogConfig.formConfig.formItems.forEach((item) => {
        if (item.prop == "channel_id") {
          item.options = channelList;
        }
      });
      this.formItems.forEach((item) => {
        if (item.prop == "channel_id") {
          item.options = channelList;
        }
      });
    },
    async getArea(parent_id, level_type = 1) {
      const params = {
        level_type,
        parent_id,
      };
      const { data } = await getArea(params);
      if (level_type == 1) {
        // 赋值表单省份
        this.dialogConfig.formConfig.formItems.forEach((item) => {
          if (item.prop == "province_id") {
            item.options = data;
          }
        });
        this.formItems.forEach((item) => {
          if (item.prop == "province_id") {
            item.options = data;
          }
        });
      }
      if (level_type == 2) {
        this.dialogConfig.formConfig.formItems.forEach((item) => {
          if (item.prop == "city_id") {
            item.options = data;
          }
        });
        this.formItems.forEach((item) => {
          if (item.prop == "city_id") {
            item.options = data;
          }
        });
      }
    },
    async submitChangeMore() {
      const ids = this.checkList.map((item) => item.id);
      const params = {
        ids,
        ...this.moreChangeForm,
      };
      console.log(params);
      this.isSubmitMoreLoading = true;
      try {
        await changeSysMore(params);
        this.isMoreChange = false;
        this.$message.success("操作成功");
        this.getInfo();
      } finally {
        this.isSubmitMoreLoading = false;
      }
    },
    async getInfo() {
      this.isLoading = true;
      const params = { ...this.searchInfo };
      const { data } = await getSysList(params);
      this.isLoading = false;
      this.info = data;
    },
    async getAllCateList() {
      const { data } = await getAllList();
      // 赋值表单数据
      this.dialogConfig.formConfig.formItems.forEach((item) => {
        if (item.prop == "cate_id") {
          item.options = data;
        }
      });
      this.formItems.forEach((item) => {
        if (item.prop == "cate_id") {
          item.options = data;
        }
      });
    },
    changeMore() {
      this.moreChangeForm = {};
      this.checkList = JSON.parse(JSON.stringify(this.checkList));
      this.isMoreChange = true;
    },
    saleChange(e) {
      console.log(e);
      if (e != 1) {
        this.isDisAbleValue = false;
      } else {
        this.isDisAbleValue = true;
      }
    },
    resetSearch() {
      this.searchInfo = this.$options.data.call(this).searchInfo;
      this.searchInfo.created_time = [];
      this.getInfo();
    },
    goSearch() {
      // 重置时间
      this.getInfo();
    },
    add() {
      const whiteList = [
        // "face_value",
        "pay_tip",
        "status",
        "sale_mode",
        "sale_mode_value",
        "commission_id",
        "first_commission_id",
        "sort",
        "is_subscribe",
        "is_limit_new_user",
        "goods_tag",
        "pay_success_text",
        "detail",
        "payment_id",
      ];
      this.dialogConfig.formConfig.formItems.forEach((item) => {
        // item.isHide = false;
        // if (item.prop == "sale_price") {
        //   // 修改系统产品不允许修改售价
        //   item.disabled = true;
        // }
        if (!whiteList.includes(item.prop)) {
          item.isHide = false;
        }
        if (item.prop == "sale_price") {
          // 修改系统产品不允许修改售价
          item.disabled = false;
        }
      });
      this.richStr = "";
      this.dialogConfig.formConfig.formData = {};
      this.isShowDialog = true;
    },
    selectionChange(value) {
      console.log(value);
      this.checkList = value;
    },
    change(item) {
      // 修改
      // if (item.spec) {
      //   // item = item.spec;
      //   // 合并对象，优先使用spec
      //   // item = { ...item, ...item.spec };
      // }
      // 充值富文本
      this.richStr = "";
      const loading = ElLoading.service({
        lock: true,
        text: "Loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      detail(item.id)
        .then((res) => {
          res.data.user_price = +res.data.user_price;
          res.data.sale_price = +res.data.sale_price;
          res.data.market_price = +res.data.market_price;
          res.data.sale_mode_value = +res.data.sale_mode_value;
          res.data.sale_mode_value = +res.data.sale_mode_value;

          this.isShowDialog = true;

          res.data.province_id = res.data.province_id || undefined;
          res.data.city_id = res.data.city_id || undefined;

          // 赋值富文本
          // this.richStr = res.data.detail;
          if (res.data.province_id) {
            this.getArea(res.data.province_id, 2);
          }
          if (res.data.user_id) {
            // 自建产品,可修改所有数据
            this.dialogConfig.formConfig.formData = res.data;

            this.richStr = this.dialogConfig.formConfig.formData.detail;

            this.dialogConfig.formConfig.formItems.forEach((item) => {
              // const isHas = whiteList.find(item=>item)
              item.isHide = false;
              if (!userStore.is_show_pay && item.prop == "payment_id") {
                item.isHide = true;
              }
              if (!userStore.is_show_pay && item.prop == "pay_tip") {
                item.isHide = true;
              }
            });
            isLimitChange(
              res.data.is_limit,
              this.dialogConfig.formConfig.formItems
            );
            // 处理限购数据
            if (res.data.limit_buy_config) {
              res.data.limit_value = res.data.limit_buy_config.limit_value;
              res.data.limit_type = res.data.limit_buy_config.limit_type;
              res.data.limit_time = res.data.limit_buy_config.limit_time;
              // 验证表单显示
              limitTypeChange(
                res.data.limit_type,
                this.dialogConfig.formConfig.formItems
              );
            }
            saleModeChange(
              res.data.sale_mode,
              this.dialogConfig.formConfig.formItems
            );
            isNeedCodeChange(
              res.data.is_need_code,
              this.dialogConfig.formConfig.formItems
            );
          } else {
            // 基于系统添加后修改
            if (res.data.spec) {
              res.data.sale_mode_value = +res.data.sale_mode_value;
              res.data.first_sale_price = +res.data.first_sale_price;
              // res.data.spec.sale_mode_value = +res.data.spec.sale_mode_value;
              // res.data.spec.first_sale_price = +res.data.spec.first_sale_price;
              // this.dialogConfig.formConfig.formData = {
              //   ...res.data,
              //   ...res.data.spec,
              // };
              this.dialogConfig.formConfig.formData = res.data;

              // 显示分佣规则
              // if(this.dialogConfig.formConfig.formData.commission_id)
              // 重新赋值id
              this.dialogConfig.formConfig.formData.id = res.data.id;
            } else {
              this.dialogConfig.formConfig.formData = {
                ...res.data,
              };
            }
            // console.log("111", this.dialogConfig.formConfig.formData);
            this.richStr = this.dialogConfig.formConfig.formData.detail;
            // 设置部分表单的禁用
            const whiteList = [
              "pay_tip",
              "face_value",
              "status",
              "first_sale_price",
              "sale_mode",
              "sale_mode_value",
              "commission_id",
              "first_commission_id",
              "sort",
              "is_subscribe",
              "is_limit_new_user",
              "goods_tag",
              "pay_success_text",
              "detail",
              "is_stop",
              "is_stop_text",
              "payment_id",
            ];
            this.dialogConfig.formConfig.formItems.forEach((item) => {
              // const isHas = whiteList.find(item=>item)
              if (whiteList.includes(item.prop)) {
                item.isHide = false;
              } else {
                item.isHide = true;
              }
              if (item.prop == "sale_price") {
                // 修改系统产品不允许修改售价
                item.disabled = true;
              }
              // 处理动态显示支付配置
              if (!userStore.is_show_pay && item.prop == "payment_id") {
                item.isHide = true;
              }
              if (!userStore.is_show_pay && item.prop == "pay_tip") {
                item.isHide = true;
              }
            });
            saleModeChange(
              this.dialogConfig.formConfig.formData.sale_mode,
              this.dialogConfig.formConfig.formItems
            );
            // 禁用默认售价
            // this.dialogConfig.formConfig.formItems
          }
        })
        .finally(() => {
          loading.close();
        });
    },
    async submit() {
      console.log(this.dialogConfig.formConfig.formData.detail);
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          const params = { ...this.dialogConfig.formConfig.formData };
          console.log(params);
          // 处理限购配置
          params.limit_buy_config = {
            limit_type: params.limit_type,
            limit_value: params.limit_value,
            limit_time: params.limit_time,
          };
          // this.dialogConfig.formConfig.formData.detail
          params.detail = this.richStr;
          console.log("params", params.detail);
          this.dialogLoading = true;
          try {
            if (this.dialogConfig.formConfig.formData.id) {
              await change(params);
            } else {
              await add(params);
            }
            this.$message.success("操作成功!");
            this.isShowDialog = false;
            this.getInfo();
          } finally {
            this.dialogLoading = false;
          }
        } else {
          this.$message.error("请将数据填写完整");
        }
      });
    },
    del(item) {
      // 删除
      // if (item.spec) {
      //   item = item.spec;
      // }
      this.$modal
        .confirm(
          "平台产品不允许删除，当前删除只能删除基于系统修改的一些配置,并不会删除产品,是否确认删除吗？"
        )
        .then(function () {
          return del(item.id);
        })
        .then(() => {
          this.getInfo();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {});
    },
    getMsg(val) {
      // console.log("getMsg", val);
      this.richStr = val;
      // this.dialogConfig.formConfig.formData.detail = val;
    },
  },
};
</script>

<style lang="scss" scoped>

:deep(.el-form-item__content){
  width:150px!important;

}
:deep(.el-input__wrapper){
  width:150px!important;

}
:deep(.el-input__inner){
  width:150px!important;
}
</style>
